<template>
  <div class="label-remark scroll">
    <!-- 群名称 -->
    <div class="friend-item">
      <div class="friend-item-title">
        <span class="tip">群聊名称</span>
        <div class="btns">
          <el-button
            type="primary"
            plain
            icon="el-icon-edit-outline"
            circle
            @click="changeRoomName"
          ></el-button>
        </div>
      </div>
      <div class="friend-item-content">{{currentFriend.NickName || ''}}</div>
    </div>
    <!-- 群公告 -->
    <div class="friend-item">
      <div class="friend-item-title">
        <span class="tip">群公告</span>
        <div class="btns">
          <el-button
            v-if="currentFriend.WeChatId === currentFriend.Owner"
            type="primary"
            plain
            icon="el-icon-edit-outline"
            circle
            @click="changeNotice"
          ></el-button>
        </div>
      </div>
      <div class="friend-item-content">{{currentFriend.Notice || ''}}</div>
    </div>
    <!-- 群内昵称 -->
    <div class="friend-item">
      <div class="friend-item-title">
        <span class="tip">群内昵称</span>
        <div class="btns">
          <el-button
            type="primary"
            plain
            icon="el-icon-edit-outline"
            circle
            @click="changeMyRoomName"
          ></el-button>
        </div>
      </div>
      <div class="friend-item-content">{{currentFriend.SelfDisplayName || ''}}</div>
    </div>
    <!-- 群主 -->
    <div class="friend-item">
      <div class="friend-item-title">
        <span class="tip">群主</span>
        <div class="btns">
          <el-button
            v-if="currentFriend.WeChatId === currentFriend.Owner"
            type="primary"
            plain
            icon="el-icon-s-promotion"
            circle
            @click="transferOwner"
          ></el-button>
        </div>
      </div>
      <div class="friend-item-content owner">
        <!-- 群主头像 -->
        <el-avatar
          class="avatar"
          shape="square"
          :size="40"
          style="min-width:40px"
          :src="friendMap[currentFriend.Owner] ?  friendMap[currentFriend.Owner].Avatar:( memberMap[currentFriend.Owner] ? memberMap[currentFriend.Owner].Avatar:'')"
          @error="errorHandler"
          @click.native="showMemberDetail(currentFriend.Owner)"
          :title="currentFriend.Owner"
        >
          <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
        </el-avatar>
        <!-- 群主昵称 -->
        <div class="owner-name">
          <span
            v-if="friendMap[currentFriend.Owner]"
            v-text="friendMap[currentFriend.Owner].FriendNick"
          ></span>
          <span
            v-else-if="memberMap[currentFriend.Owner]"
            v-text="memberMap[currentFriend.Owner].Nickname"
          ></span>
          <span v-else v-text="currentFriend.Owner"></span>
        </div>
      </div>
    </div>

    <!-- 群成员 -->
    <div class="friend-item">
      <div class="friend-item-title">
        <span class="tip">
          群成员
          <span v-text="currentFriend.MemberList.length+'个人'"></span>
        </span>
        <div class="btns">
          <el-button type="primary" plain icon="el-icon-plus" circle @click="addMember"></el-button>
          <el-button type="danger" plain icon="el-icon-minus" circle @click="kickMember"></el-button>
          <!-- <el-button type="primary" plain icon="el-icon-view" circle @click="viewAllMember"></el-button> -->
        </div>
      </div>
      <div class="friend-item-content avatars">
        <el-avatar
          v-for="(member, index) in currentFriend.MemberList"
          :key="index"
          class="avatar"
          :class="{'not-friend':!friendMap[member]}"
          shape="square"
          :size="40"
          :src="(friendMap[member] && friendMap[member].Avatar) ?  friendMap[member].Avatar:( (memberMap[member] && memberMap[member].Avatar) ? memberMap[member].Avatar:'')"
          @error="errorHandler"
          :title="(friendMap[member] && friendMap[member].FriendNick) ?  friendMap[member].FriendNick:( (memberMap[member] && memberMap[member].Nickname) ? memberMap[member].Nickname:member)"
          @click.native="showMemberDetail(member)"
          v-show="index < maxNumber"
        >
          <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
        </el-avatar>
      </div>
      <div class="friend-item-footer">
        <el-button size="medium" type="primary" class="footer-btn" @click="showAllMember">查看全部群成员</el-button>
      </div>
    </div>

    <!-- 一下等有空了再实现 -->

    <!-- 免打扰 -->
    <!-- <div class="dis-turb">
          <span class="tip">消息免打扰</span>
          {{currentFriend.MsgSilent}}
    </div>-->
    <!-- 保存到通讯录 -->
    <!-- <div class="dis-turb">
          <span class="tip">保存到通讯录</span>
    </div>-->
    <!-- 设置群邀请确认 -->
    <!-- <div class="dis-turb" v-if="w">
          <span class="tip">设置群邀请确认</span>
    </div>-->
    <!-- 设置群备注 微信7.0.14才有的功能 -->
    <!-- <div class="dis-turb" v-if="w">
          <span class="tip">设置群邀请确认</span>
    </div>-->
    <!-- 设置群管理员AddManager -->
    <!-- <div class="dis-turb" v-if="w">
          <span class="tip">设置群邀请确认</span>
    </div>-->

    <!-- 删除并退出 -->
    <el-button type="danger" style="margin:15px 0" @click="deleteAndLogout">删除并退出</el-button>

    <SlotFriends
      v-if="friendsDialogVisible"
      :dialogTilte="dialogTilte"
      :action="action"
      :dialogData="dialogData"
      :currentFriend="currentFriend"
      :friends="dialogData"
      :friendsDialogVisible="friendsDialogVisible"
      @closeSlotFriends="friendsDialogVisible = false"
    ></SlotFriends>
    <!-- 群成员详情 -->
    <el-dialog class="member-detail" :modal="false" title="群成员详情" :visible.sync="memberDialog">
      <div class="member-detail-info">
        <el-avatar shape="square" :size="100" :src="memberDetail.Avatar" @error="errorHandler">
          <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" />
        </el-avatar>
        <div class="member-detail-text">
          <p>
            微信：
            <span v-text="memberDetail.FriendId"></span>
          </p>
          <p>
            昵称：
            <span v-text="memberDetail.FriendNick || '- -'"></span>
          </p>
          <p>
            性别：
            <span v-text="memberDetail.Gender || '- -'"></span>
          </p>
          <p>
            地址：
            <span v-text="memberDetail.Province || '-'"></span>
            &nbsp;
            <span v-text="memberDetail.City || '-'"></span>
          </p>
        </div>
      </div>
      <div class="member-detail-btns">
        <el-button
          v-if="!friendMap[memberDetail.FriendId]"
          type="primary"
          size="medium"
          @click="getMemberDetail"
        >获取详情</el-button>
        <el-button
          v-if="!friendMap[memberDetail.FriendId]"
          type="primary"
          size="medium"
          @click="addToAddress"
        >添加到通讯录</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

import SlotFriends from '../SlotFriends'

export default {
  name: 'ChatRoomManager',
  data() {
    return {
      maxNumber: 30,
      memberDialog: false, // 显示群成员详情
      memberDetail: {}, // 群成员详情
      action: 0,
      dialogTilte: '添加群成员',
      dialogData: [],
      friendsDialogVisible: false,
      doNotTouch: 0, // 免打扰
      saveToAddress: 0, // 保存到通讯录
      setInvitationConfirm: 0 // 邀请确认
    }
  },
  props: {
    currentFriend: {
      type: Object,
      required: true,
      default: function () {
        return {}
      }
    }
  },
  components: {
    SlotFriends
  },
  computed: {
    ...mapGetters({
      members: 'nedb/members',
      friends: 'nedb/friendsAll'
    }),
    // 陌生人map
    memberMap() {
      let mm = {}
      for (const member of this.members) {
        mm[member.Wxid] = member
      }
      return mm
    },
    // 好友map
    friendMap() {
      let fm = {}
      for (const friend of this.friends) {
        fm[friend.FriendId] = friend
      }
      return fm
    },
  },
  methods: {
    errorHandler() {
      return true
    },
    // 改群名
    changeRoomName() {
      if (!this.currentFriend.UserName) {
        this.$message.warning('请先选择一个群！')
        return
      }
      this.$prompt('修改群聊名称', '修改群聊名称', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S{1,50}/,
        inputErrorMessage: '备注长度1-50，不能含有特殊字符！'
      }).then(({ value }) => {
        let content = {
          WeChatId: this.currentFriend.WeChatId, // 商家所属微信号
          ChatRoomId: this.currentFriend.UserName, // 群聊id
          Action: 0, // 指令
          Content: value
        }
        this.$store.dispatch('websocket/ChatRoomActionTask', content)
      }).catch(() => {
        this.$message.info('取消输入');
      });
    },
    // 改我的群昵称
    changeMyRoomName() {
      if (!this.currentFriend.UserName) {
        this.$message.warning('请先选择一个群！')
        return
      }
      this.$prompt('修改我的群昵称', '修改我的群昵称', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S{1,50}/,
        inputErrorMessage: '备注长度1-50，不能含有特殊字符！'
      }).then(({ value }) => {
        let content = {
          WeChatId: this.currentFriend.WeChatId, // 商家所属微信号
          ChatRoomId: this.currentFriend.UserName, // 群聊id
          Action: 4, // 指令
          Content: value
        }
        this.$store.dispatch('websocket/ChatRoomActionTask', content)
      }).catch(() => {
        this.$message.info('取消输入');
      });
    },
    // 修改群公告
    changeNotice() {
      if (!this.currentFriend.UserName) {
        this.$message.warning('请先选择一个群！')
        return
      }
      this.$prompt('修改群公告', '修改群公告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S{1,500}/,
        inputErrorMessage: '备注长度1-500，不能含有特殊字符！'
      }).then(({ value }) => {
        let content = {
          WeChatId: this.currentFriend.WeChatId, // 商家所属微信号
          ChatRoomId: this.currentFriend.UserName, // 群聊id
          Action: 1, // 指令
          Content: value
        }
        this.$store.dispatch('websocket/ChatRoomActionTask', content)
      }).catch(() => {
        this.$message.info('取消输入');
      });
    },
    // 删除并退出群
    deleteAndLogout() {
      if (!this.currentFriend.UserName) {
        this.$message.warning('请先选择一个群！')
        return
      }
      this.$confirm('删除并退出群?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let content = {
          WeChatId: this.currentFriend.WeChatId, // 商家所属微信号
          ChatRoomId: this.currentFriend.UserName, // 群聊id
          Action: 7, // 指令
        }
        this.$store.dispatch('websocket/ChatRoomActionTask', content)
        this.$message.success('指令已经下发！')
      }).catch(() => {
        this.$message.info('已取消删除')
      });
    },
    // 拉人进群
    addMember() {
      this.dialogTilte = '拉人进群'
      this.action = 2
      this.friendsDialogVisible = true
      this.dialogData = this.friends
    },
    // 踢出群
    kickMember() {
      if (this.currentFriend.WeChatId === this.currentFriend.Owner) {
        let members = []
        for (const mid of this.currentFriend.MemberList) {
          let avatar = ''
          if (this.friendMap[mid] && this.friendMap[mid].Avatar) {
            avatar = this.friendMap[mid].Avatar
          } else if (this.memberMap[mid] && this.memberMap[mid].Avatar) {
            avatar = this.memberMap[mid].Avatar
          }
          let friendNick = ''
          if (this.friendMap[mid] && this.friendMap[mid].FriendNick) {
            friendNick = this.friendMap[mid].FriendNick
          } else if (this.memberMap[mid] && this.memberMap[mid].Nickname) {
            friendNick = this.memberMap[mid].Nickname
          }
          let friend = {
            WeChatId: this.currentFriend.WeChatId,
            FriendId: mid,
            Avatar: avatar,
            FriendNick: friendNick,
            LabelIds: this.friendMap[mid] && this.friendMap[mid].LabelIds ? this.friendMap[mid].LabelIds : '',
          }
          members.push(friend)
        }
        this.dialogData = members
        this.dialogTilte = '踢人出群'
        this.action = 3
        this.friendsDialogVisible = true
      } else {
        this.$message.warning('你不是群主！')
      }
    },
    // 转让群主
    transferOwner() {
      if (this.currentFriend.WeChatId === this.currentFriend.Owner) {
        let members = []
        for (const mid of this.currentFriend.MemberList) {
          let avatar = ''
          if (this.friendMap[mid] && this.friendMap[mid].Avatar) {
            avatar = this.friendMap[mid].Avatar
          } else if (this.memberMap[mid] && this.memberMap[mid].Avatar) {
            avatar = this.memberMap[mid].Avatar
          }
          let friendNick = ''
          if (this.friendMap[mid] && this.friendMap[mid].FriendNick) {
            friendNick = this.friendMap[mid].FriendNick
          } else if (this.memberMap[mid] && this.memberMap[mid].Nickname) {
            friendNick = this.memberMap[mid].Nickname
          }
          let friend = {
            WeChatId: this.currentFriend.WeChatId,
            FriendId: mid,
            Avatar: avatar,
            FriendNick: friendNick,
            LabelIds: this.friendMap[mid] && this.friendMap[mid].LabelIds ? this.friendMap[mid].LabelIds : '',
          }
          members.push(friend)
        }
        this.dialogData = members
        this.dialogTilte = '群主转让'
        this.action = 10
        this.friendsDialogVisible = true
      } else {
        this.$message.warning('你不是群主！')
      }
    },
    // 显示或隐藏群成员
    showAllMember() {
      if (this.maxNumber === 30) {
        this.viewAllMember()
      }
      this.maxNumber === 30 ? this.maxNumber = 500 : this.maxNumber = 30
    },
    // 查看群成员
    viewAllMember() {
      let content = {
        WeChatId: this.currentFriend.WeChatId, // 商家所属微信号
        ChatRoomId: this.currentFriend.UserName, // 群聊id
        Action: 9, // 指令
      }
      this.$store.dispatch('websocket/ChatRoomActionTask', content)
      this.$message.info('指令已经下发！')
    },
    // 成员详情
    showMemberDetail(member) {
      if (this.friendMap[member]) {
        this.memberDetail = this.friendMap[member]
      } else if (this.memberMap[member]) {
        this.memberDetail = {
          WeChatId: this.currentFriend.WeChatId,
          FriendId: member,
          Avatar: this.memberMap[member].Avatar ? this.memberMap[member].Avatar : '',
          FriendNick: this.memberMap[member].Nickname ? this.memberMap[member].Nickname : '',
          LabelIds: '',
        }
      } else {
        this.memberDetail = {
          WeChatId: this.currentFriend.WeChatId,
          FriendId: member,
          Avatar: '',
          FriendNick: '',
          LabelIds: '',
        }
      }
      this.memberDialog = true
    },
    // 添加到通讯录
    addToAddress() {
      let content = {
        WeChatId: this.memberDetail.WeChatId, // 商家个人微信内部全局唯一识别码
        ChatroomId: this.currentFriend.UserName, // 所在的群聊id
        FriendId: this.memberDetail.FriendId, // 请求加好友微信内部全局唯一识别码
        Message: '', // 招呼语
        Remark: '', // 备注信息
      }
      this.$store.dispatch('websocket/AddFriendInChatRoomTask', content)

      this.memberDialog = false
      this.$message.info('指令已经下发！')
    },
    // 获取详情
    getMemberDetail() {
      let content = {
        wechatId: this.memberDetail.WeChatId,
        friendId: this.memberDetail.FriendId
      }
      this.$store.dispatch('websocket/RequestContactsInfoTask', content)
      this.memberDialog = false
      this.$message.info('指令已经下发！')
    },
  },
  created() {
    this.viewAllMember = this._.throttle(this.viewAllMember, 5000)
  }
}
</script>

<style lang="scss" scoped>
.label-remark {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 5px;

  .el-button {
    padding: 5px 8px;
  }

  .friend-item {
    width: 100%;
    margin: 5px 0;

    .friend-item-title {
      background: #b3d8ff;
      padding: 5px;
      display: flex;
      justify-content: space-between;
      .tip {
        line-height: 20px;
      }
      .btns {
        line-height: 20px;
      }
    }

    .friend-item-content {
      background: white;
      min-height: 30px;
      padding: 5px;
    }
    .owner {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .owner-name {
        margin-left: 5px;
        @include ellipsis(3);
      }
    }
    .avatars {
      display: flex;
      flex-wrap: wrap;
      .avatar {
        width: 60px;
        margin: 2px;
      }
      .not-friend {
        border: solid orange 1px;
      }
    }

    .friend-item-footer {
      background: white;
      width: 100%;
      .footer-btn {
        // border: solid red 1px;
        width: 150px;
        margin: 5px 75px;
      }
    }
  }

  .member-detail {
    display: flex;
    flex-direction: column;
    ::v-deep .el-dialog {
      width: 500px;
      .el-dialog__body {
        padding: 20px;
      }
    }
    .member-detail-info {
      display: flex;
      .member-detail-text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 20px;
        overflow: hidden;
      }
    }
    .member-detail-btns {
      display: flex;
      justify-content: space-around;
      margin-top: 20px;
    }
  }
}
</style>

